<template>
	<view class="container">
		<view class="join-form">
			<view class="form-title">我想要加入球队！</view>
			
			<!-- 申请表单 -->
			<view class="form-content">
				<textarea class="join-message" 
					v-model="message" 
					placeholder="请输入申请理由..." 
					:maxlength="200"
					auto-height>
				</textarea>
				
				<!-- 字数统计 -->
				<view class="word-count">{{ message.length }}/200</view>
			</view>
			
			<!-- 提交按钮固定在底部 -->
			<view class="submit-wrapper">
				<button class="submit-btn" @tap="submitApplication">提交申请</button>
			</view>
		</view>
	</view>
</template>

<script>
import { addJoinApplications } from '@/api/youqiu/joinApplications.js'

export default {
	data() {
		return {
			teamId: '',
			message: ''
		}
	},
	onLoad(options) {
		if (options.teamId) {
			this.teamId = options.teamId
		}
	},
	methods: {
		submitApplication() {
			if (!this.message.trim()) {
				uni.showToast({
					title: '请输入申请理由',
					icon: 'none'
				})
				return
			}
			
			uni.showLoading({
				title: '提交中...'
			})
			
			// 调用加入球队API
			addJoinApplications({
				teamId: this.teamId,
				message: this.message.trim()
			}).then(() => {
				uni.hideLoading()
				uni.showToast({
					title: '申请已提交',
					icon: 'success'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}).catch(err => {
				uni.hideLoading()
				uni.showToast({
					title: err.message || '提交失败',
					icon: 'none'
				})
			})
		}
	}
}
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
}

.join-form {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.form-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	padding: 40rpx;
	text-align: center;
}

.form-content {
	flex: 1;
	padding: 0 30rpx;
	position: relative;
}

.join-message {
	width: 100%;
	min-height: 300rpx;
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	font-size: 28rpx;
	color: #333;
	line-height: 1.6;
}

.word-count {
	position: absolute;
	right: 50rpx;
	bottom: 20rpx;
	font-size: 24rpx;
	color: #999;
}

.submit-wrapper {
	padding: 40rpx 30rpx;
	background-color: #fff;
}

.submit-btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	background-color: #ff6b35;
	color: #fff;
	font-size: 32rpx;
	border-radius: 44rpx;
	border: none;
}

/* 按钮点击效果 */
.submit-btn:active {
	opacity: 0.8;
}
</style> 